<template>
<div>
    <div  class=control-section  :style="{height: gadgetHeight + 'px'}">
      <div class=content-wrapper
          v-loading="loading" style="width:100%" >
          <ejs-dropdownlist :dataSource='datesource' :showClearButton="gadgetSetting.showClearButton" v-model="value"
            :fields='fields' :filterBarPlaceholder="gadgetSetting.filterPlaceholder" :popupHeight='gadgetSetting.height'
            :allowFiltering='gadgetSetting.allowFiltering'
            @change="onchange"  :filtering='onFiltering'
          ></ejs-dropdownlist>
      </div>

    <model :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
    :dataInfo="queryModelDefaultSetting.dataInfo" :updateGadget="upgradeGadgetSetting"/>
  </div>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
// import model from '@/components/gadget/query-model/query-model.vue'
import { getUrlQureyParams } from '@/utils/common'
import { defaultGadgetSettingList } from '@/utils/data-json'
import { sqlSet } from '@/components/storybook/utilties/throttleRequest'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      datesource: {
        value: '',
        text: ''
      },
      gadgetSetting: {},
      value: null,
      gadgetStatus: 'init',
      loading: false,
      fields: { text: 'realName', value: 'id' },
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetSettingExclude: ['DATA'],
          gadgetType: 'customizeduserdropdownlistgadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'customizeduserdropdownlistgadget' }).gadgetSetting
          // gadgetSetting: {
          //   showClearButton: 'true',
          //   allowFiltering: true,
          //   filterPlaceholder: 'Search',
          //   height: '220px',
          //   queryParams: 'user_id',
          //   watermark: 'Please Select a User'
          // }
        }
      },
      heightoffset: 60

    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.query()
    this.$store.state.isWidget = false
    this.gadgetHeight = (this.gadgetInfo.h * 20) - this.heightoffset - 35
  },
  destroyed () {
    this.delQueryParam()
  },
  methods: {
    resetslicer () {

    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = newH * 20 - this.heightoffset - 20
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    query () {
      this.loading = true
      var _self = this
      _self.gadgetSetting = this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      const params = {
        status: 1,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName
      }
      this.$interface.schedule.getWorkScheduledUserListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          _self.datesource = res.data
          this.loading = false
          _self.afterQuery()
        })
        .catch(() => {
          this.loading = false
        }).finally(() => {
          this.loading = false
          this.updateGadgetLoadingStatus(!this.loading)
        })
    },
    afterQuery () {
      var valueFromQuery = getUrlQureyParams(this.gadgetSetting.queryParams)
      if (valueFromQuery) {
        this.value = valueFromQuery
      } else {
        let isFind = this.datesource.findIndex(e => e.id === this.$store.state.user.id)
        if (isFind > 0) {
          this.value = this.$store.state.user.id
          valueFromQuery = this.$store.state.user.id
        } else {
          this.value = this.datesource[0].id
          valueFromQuery = this.datesource[0].id
        }
      }
      this.getDataListParams(valueFromQuery)
    },
    onFiltering (e) {
      // get input data

    },
    onchange (e) {
      this.getDataListParams(e.itemData.id)
    },
    getDataListParams (val) {
      var _self = this
      if (val) {
        sqlSet.clear()
        var newslicer = {}
        newslicer[_self.gadgetSetting.queryParams] = val
        _self.slicer = _self._.merge(_self.slicer, newslicer)
        localStorage.setItem(this.pageId + '-userdropdown-list-gadget-' + _self.gadgetSetting.queryParams, JSON.stringify(val))
      } else {
        delete _self._.merge(_self.slicer, newslicer)
        localStorage.removeItem(this.pageId + '-userdropdown-list-gadget-' + _self.gadgetSetting.queryParams)
        this.$message.error(this.gadgetSetting.watermark)
      }
      _self.updateGadgetStatus('ready')
    },
    delQueryParam () {
      delete this.slicer[this.gadgetSetting.queryParams]
    }
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 5px 5px !important;
}
.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

</style>
